폰트 굵기 : 느낌 말고 ‘근거’로 선택하자 | 매거진에 참여하세요

디자인을 할 때 폰트를 고르는 건 흔한 일이지만, 폰트 ‘굵기(웨이트)’를 고르는 건 그보다 훨씬 덜 신중하게 다뤄지곤 합니다.

Thin이 예뻐 보여서, Bold가 강해 보여서라는 이유로 웨이트를 선택한다면, 그건 반쪽짜리 디자인입니다.

왜냐하면 폰트 웨이트는 단순한 미적 요소가 아니라,

가독성, 정보 전달력, 심리적 인상, 접근성에 직접적으로 영향을 주는 요소이기 때문입니다.

이 글에서는 폰트 웨이트의 기본 개념부터, 각 웨이트가 언제 어떻게 사용되어야 하는지,

그리고 이를 뒷받침하는 실험 결과와 연구 자료들을 한번 정리해봤어요

1. 폰트 웨이트란?

폰트 웨이트(Font Weight)는 글자의 굵기 정도를 의미합니다. CSS에서는 font-weight 속성으로 정의하며,

100부터 900까지 100 단위로 굵기를 조절할 수 있습니다. 각각의 숫자는 다음과 같은 명칭과 성격을 갖습니다:

"왜 이 굵기를 써야 하죠?" — 실험과 연구 결과

폰트 웨이트 선택이 단순 미학의 문제가 아니라는 점을 뒷받침하는 실증적 연구 결과들이 있습니다.

1. Bernard et al. (2003)

실험 주제: 폰트 웨이트가 웹 콘텐츠 가독성에 미치는 영향
결과 요약:

• - Regular(400)와 Semi-Bold(600) 웨이트가 가장 가독성이 높음

• - Thin(100~300)은 특히 작은 크기에서 읽기 어려움

• - Bold(700 이상)는 문자 간 구분이 어려워 인지 속도가 느려짐

2. Dyson & Haselgrove (2001)

실험 주제: 폰트 굵기와 시선 이동의 관계 (Eye-tracking 실험)
결과 요약:

• - 적절한 굵기(Regular~Medium)는 시선 이동 효율을 높이고

• - 너무 얇거나 두꺼운 텍스트는 시각적 피로를 유발

3. Google Fonts UX Study

실험 주제: 다양한 폰트 웨이트가 사용자 인식과 UX에 미치는 영향
결과 요약:

• - Regular(400)가 본문용으로 가장 안정적인 웨이트

• - 300 이하 웨이트는 모바일에서 인식률 저하

• - Bold(700)는 시선 유도에는 효과적이나 본문에는 비권장

4. WebAIM 접근성 가이드라인

핵심 내용:

• - 시각 장애 또는 노안 사용자는 Regular 이상, 가능하면 Semi-Bold(600) 이상을 선호

• - 대비가 낮은 얇은 웨이트는 접근성 기준 위반 가능성 있음

상황별 폰트 굵기 추천

상황별로 어떤 웨이트를 선택하면 좋을지 정리해봤습니다.

폰트 굵기 적용 시 유의사항

• 1. 모든 굵기가 지원되는지 확인:
  예를 들어 Noto Sans는 100~900까지 지원하지만, Pretendard는 일부만 지원합니다.

• 2. 웹 속도에 영향:
  5개 이상의 웨이트를 웹폰트로 로드하면 페이지 로딩 속도가 느려질 수 있습니다.

• 3. 굵기 간 대비 유지:
  제목과 본문 모두 Bold로 하면 강조가 사라집니다. 계층 구조를 위해 명확한 웨이트 차이 필요.

• 4. 모바일에서 얇은 굵기 주의:
  작은 해상도에서 픽셀 단위로 깨짐 현상 발생 가능

디자인은 근거로 말한다

우리는 폰트를 선택할 때 ‘예쁘다’는 감각에 의존하기 쉽습니다.

하지만 UI/UX 디자이너든 개발자든, 가독성과 정보 전달을 설계하는 사람이라면 '감각'뿐 아니라 '근거'로 말할 수 있어야 합니다.

폰트 웨이트 하나에도 사용자 경험을 바꾸는 힘이 있습니다.
눈에 띄는 Bold 하나, 가독성 좋은 Regular 하나가 콘텐츠 전체를 살릴 수 있습니다.

이제부터는 이렇게 물어보세요.

이 텍스트는 왜 Bold인가?
이 본문은 왜 Light가 아닌 Regular인가?

답할 수 있다면, 당신은 이미 좋은 타이포그래피를 하고 있는 겁니다.